<!DOCTYPE html>
<html>
<head>
    <title>鹿鹿泽本月到期限时课程会员</title>
    <link rel="stylesheet" href="../static/css/minghu.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
</head>
<body style="background-color: rgb(254, 254, 255);">
    {% include 'show_ins_info.html' %}
    <hr>
    <h2 id="title" style="margin-bottom: 40px;">本月到期限时课程会员清单</h2>    

    <div>
        <!-- <hr style="border-top:1px dashed;margin-bottom: 30px;"> -->
        <div id="dueList"></div>
    </div>


    <script src="../static/js/common.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    
    <script>
        let insName;
        let insId;
        let insRole;
        let insList;
        
        document.addEventListener('DOMContentLoaded',function(){
            // loginCheck();        
            const insInfo=hideInsSelectBlockAndGetInsInfo();
            insId=insInfo.sessionInsId;
            insName=insInfo.sessionInsName;
            insRole=insInfo.sessionInsRole;
            // console.log(insName)
            //教练角色不允许进入该页面，返回Index
            if(insRole==='ins'){
                window.location.replace('./index');
            }

            const today=new Date();

            document.getElementById('title').innerHTML=`${today.getMonth()+1}月到期限时课程会员清单`;

            fetch('/get_ins_list', {
                method: 'GET',
            })
            .then(response => response.json())
            .then(data => {
            //将data赋值给块变量cus_list，供后面的handleInput使用
                console.log('ins list:',data);
                insList=data['ins_list'];
            })
            .catch(error => console.error('Error:', error));
            

            showDueList();
         

        });

        function showDueList(){
            const dueList=document.getElementById('dueList');
            dueList.innerHTML='';
            let insIdPage;
            if(insRole==='ins'){
                insIdPage=insId;
            }else{
                //特殊，陆的情况
                if(insRole==='admin'){
                    if(insId==='LZADM002' || insId==='LZADM001'){
                        insIdPage='LZINS001';
                    }
                    
                }
            }
            fetch('/get_this_month_due_data')
            .then(response=>response.json())
            .then(data=>{
                if(data['res']==='ok'){
                    // console.log('due data:',data['data']);
                    const dueData=data['data'];
                    let insList=[];
                    let cusStr='';
                    let insTitleList=[];

                    //生成教练列表
                    dueData.forEach(item=>{
                        if(!insList.includes(item[1])){
                            insList.push(item[1]);
                        }
                    });

                    insList.forEach(insName=>{
                        const insBox=document.createElement('div');
                        insBox.id=insName;
                        insBox.style.marginBottom='30px';

                        const titleBox=document.createElement('div');
                        titleBox.style.display='flex';
                        titleBox.style.flexDirection='row';
                        titleBox.style.justifyContent='start';
                        titleBox.style.alignItems='flex-end';
                        titleBox.style.margin='8px';

                        const insTitle=document.createElement('div');
                        insTitle.style.display='flex';
                        insTitle.style.flexDirection='row';
                        insTitle.style.justifyContent='start';
                        insTitle.style.alignItems='flex-end';
                        insTitle.id=insName+'Title';
                        insTitle.innerHTML=`<span style="background-color:#297acc;color:#ffffff;padding:5px;border-radius:4px;width:80px;text-align:center;">${insName}</span><span style="color:#297acc;font-size:14px;"> &nbsp;&nbsp;教练</span>`;
                        titleBox.appendChild(insTitle);

                        const countDiv=document.createElement('div');
                        countDiv.style.marginLeft='8px';
                        let insDueCusStr='';
                        let count=0;
                        dueData.forEach(item=>{  
                            if(item[1].includes(insName)){
                                count+=1;
                                const cusdate=new Date(item[5]);
                                const showDate=new Date(item[5]);
                                showDate.setDate(showDate.getDate()-1)
                                // console.log('showdate:',showDate,'\ntoday:',new Date(),'\ncompare days:',compareDatesOnly(showDate,new Date()));       
                                const qtyDiff=item[6] - item[7];
                                let qtyStr=qtyDiff;
                                if(qtyDiff<=5){
                                    qtyStr=`<span style="color:#cf432d;font-weight:bold;">${qtyDiff}</span>`;
                                }             

                                const daysDiff=compareDatesOnly2(new Date(),showDate);
                                if(daysDiff===0){
                                    // insDueCusStr=insDueCusStr+"<p style='margin-left:20px;font-weight:bold;color:#cf432d;'>"+item[3]+'(今天· 剩余'+(item[6]-item[7])+'/'+item[6]+'节)</p>';
                                    insDueCusStr += `
                                                    <p style="margin-left:20px;font-weight:bold;color:#cf432d;">
                                                        ${count}. &nbsp;&nbsp;${item[3]}(今天· 剩余${qtyStr}/${item[6]}节)
                                                    </p>
                                                    `;
                                }
                                if(daysDiff>0){      
                                    // insDueCusStr=insDueCusStr+item[3]+'('+(cusdate.getUTCMonth()+1)+'.'+showDate.getDate()+'，'+(item[6]-item[7])+'/'+item[6]+')，';
                                    
                                    if(daysDiff<=5){
                                        insDueCusStr += `<p style="margin-left:20px;">${count}. &nbsp;&nbsp;${item[3]}(${showDate.getUTCMonth() + 1}月${showDate.getDate()}日 · 剩余 <span style="color:#cf432d;font-weight:bold;">${daysDiff+1}天</span>，${qtyStr}/${item[6]}节)</p>`;
                                    }else{
                                        insDueCusStr += `<p style="margin-left:20px;">${count}. &nbsp;&nbsp;${item[3]}(${showDate.getUTCMonth() + 1}月${showDate.getDate()}日 · 剩余 ${daysDiff+1}天，${qtyStr}/${item[6]}节)</p>`;
                                    }
                                
                                }    
                                if(daysDiff<0){
                                    // insDueCusStr=insDueCusStr+"<p style='margin-left:20px;font-weight:bold;color:#cf432d;'>"+item[3]+'(今天· 剩余'+(item[6]-item[7])+'/'+item[6]+'节)</p>';
                                    insDueCusStr += `
                                                    <p style="margin-left:20px;color:#cfcfcf;">
                                                        ${count}. &nbsp;&nbsp;${item[3]}(${showDate.getUTCMonth() + 1}月${showDate.getDate()}日已过期 · 剩余${qtyDiff}/${item[6]}节)
                                                    </p>
                                                    `;
                                }   
                            }                            
                        });
                        countDiv.innerHTML=`<span style="color:#f0a422;font-size:18px;font-weight:bold;">${count}位会员</span>`;
                        titleBox.appendChild(countDiv);

                        insBox.appendChild(titleBox);

                        insDueCusStr=insDueCusStr.slice(0,-1);
                        const divStr=document.createElement('div');
                        divStr.id=insName+'Str';
                        divStr.style.fontSize='14px';
                        divStr.style.marginLeft='8px';
                        divStr.style.lineHeight='2em';
                        divStr.innerHTML=`${insDueCusStr}`;
                        insBox.appendChild(divStr);

                        dueList.appendChild(insBox);
                    });

                }else{
                    dueList.innerHTML='';
                }
            })
            .catch(error=>console.log(error))
            
        }        


    </script>
  
</body>
</html>
